<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter" %>
<html>
<head>
    <script src="//captcha.luosimao.com/static/dist/api.js" type="text/javascript"></script>
</head>
<body>
<%
    String error = (String) request.getAttribute(FormAuthenticationFilter.DEFAULT_ERROR_KEY_ATTRIBUTE_NAME);
%>
<% if (error != null) { %>
<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="alert alert-danger alert-dismissable">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <%= "com.liuceng.zen.web.auth.exceptions.CaptchaWrongException".equals(error) ? "用户被锁定,请重试." : "用户、密码或验证码错误, 请重试." %>
        </div>
    </div>
</div>
<% } %>
<div class="center-block w-xl w-auto-xs m-b-lg login_content">
    <h1>海量通DSP服务平台</h1>
    <div class="login-tab">
        <div class="tab-header">
            <p class="active">账户登录</p>
            <p>扫码登录</p>
        </div>
        <div class="tab-main">
            <div class="tab-item">
                <form:form modelAttribute="form" id="page-sign-in-form"
                           class="ng-pristine ng-invalid ng-invalid-required" method="post">
                    <div class="form-group m-b-xs">
                        <label class="hide">用户名</label>
                        <form:input path="loginName" id="username" autofocus="true" placeholder="用户名"
                                    cssClass="form-control ng-pristine ng-invalid ng-invalid-required ng-valid-email"
                                    required="required"/>
                    </div>
                    <div class="form-group m-b-xs">
                        <label class="hide">密码</label>
                        <form:password path="loginPassword" placeholder="密码" autocomplete="off"
                                       cssClass="form-control ng-pristine ng-invalid ng-invalid-required"
                                       required="required"/>
                    </div>
                    <div class="form-group m-b-xs">
                        <label class="hide">验证码</label>
                        <div class="l-captcha" data-site-key="54fb2db08556751b513acb9732f656ef" data-width="350px"
                             data-callback="getResponse(response)"></div>
                    </div>
                    <button type="submit" class="btn btn-info p-h-md m-v-lg btn-primary submit" id="login-btn">登录
                    </button>
                </form:form>
            </div>
            <div class="tab-item hide" id="login_container">

            </div>
        </div>
    </div>
    <div class="login-bottom-title">
        <strong class="ng-binding">海量通</strong> © 2016-2017
    </div>
</div>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
    $().ready(function () {
        var appid = "<%=request.getAttribute("appid")%>";
        var redirectUrl = "<%=request.getAttribute("redirectUrl")%>";
        var timestamp = Date.parse(new Date());
        var obj = new WxLogin({
            id: "login_container",
            appid: appid,
            scope: "snsapi_login",
            redirect_uri: redirectUrl+"/wxlogin",
            state: "1-0-" + timestamp,
            style: "",
            href: "https://pm.hailiangtong.com/vs/wechat_login.css"
        });
    });
    $('#page-sign-in-form').validate({
        rules: {
            loginName: {required: true, rangelength: [4, 20]},
            loginPassword: {required: true, rangelength: [6, 50]}
        },
        messages: {
            loginName: {required: "请输入用户名", rangelength: "登录名长度在4-20之间"},
            loginPassword: {required: "请输入密码", rangelength: "密码长度在6-50之间"}
        }
    })
    // 用户登录切换
    $('.tab-header p').on('click', function () {
        var index = $(this).index();
        $(this).addClass('active').siblings('p').removeClass('active');
        $('.tab-main').find('.tab-item').eq(index).removeClass('hide').siblings('.tab-item').addClass('hide');
    });
</script>
</body>
</html>